import TodoItem from "./TodoItem"

const TodoList = ({itemList,tabtype,cgAllItemFinish}) => {
  let showitenlist = []
  if(tabtype === 'Active') {
    showitenlist = itemList.filter((item) => item.finish !== true)
  } else if (tabtype === 'Completed') {
    showitenlist = itemList.filter((item) => item.finish !== false)
  } else {
    showitenlist = itemList
  }
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" checked={itemList.every(item => item.finish === true)} onChange={(e)=>cgAllItemFinish(e.target.checked)}/>
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {
          showitenlist.map((item) => <TodoItem item={item} key={item.id}></TodoItem>)
        }
      </ul>
    </section>
  )
}

export default TodoList
